<template>
  <div class="question-setting-panel" @click.stop>
    <p class="title">Q{{ currentQuestion.index }}. 问题设置</p>
    <p class="type">{{ type }}</p>
    <el-form size="small" class="form">
      <span class="group-label">整题设置</span>
      <el-divider />
      <el-form-item label="此题必答">
        <el-switch
          size="small"
          v-model="form.isRequired"
          @change="(v: fotmItemValue) => onChange('isRequired', v)"
        ></el-switch>
      </el-form-item>
      <el-form-item label="显示序号">
        <el-switch
          size="small"
          v-model="form.showIndex"
          @change="(v: fotmItemValue) => onChange('showIndex', v)"
        ></el-switch>
      </el-form-item>
      <el-form-item label="逻辑设置">
        <el-text type="primary" disabled>设置</el-text>
      </el-form-item>
      <el-form-item v-show="form.showDesc" label="内容较长时折叠">
        <el-switch
          v-model="form.foldContent"
          @change="(v: fotmItemValue) => onChange('foldContent', v)"
        ></el-switch>
      </el-form-item>
      <el-divider />
      <el-form-item label="答案与分值">
        <el-text type="primary" disabled>设置</el-text>
      </el-form-item>
      <el-form-item label="题干说明">
        <el-text type="primary" disabled>设置</el-text>
      </el-form-item>
      <el-divider />
      <span class="group-label">选项设置</span>
      <el-form-item label="选项分组">
        <el-text type="primary" disabled>设置</el-text>
      </el-form-item>
      <el-form-item label="选项随机排序 ">
        <el-switch
          v-model="form.sort"
          @change="(v: fotmItemValue) => onChange('sort', v)"
        ></el-switch>
      </el-form-item>
      <el-form-item label="选项布局">
        <el-radio-group v-model="form.layout" @change="(v: fotmItemValue) => onChange('layout', v)">
          <el-radio-button label="单列" value="1" />
          <el-radio-button label="2列" value="2" />
          <el-radio-button label="3列" value="3" />
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, computed, watch, onMounted } from 'vue'
import { QnTypeMap } from '@/lib/qnRenderEngine'
import type { QnType } from '@/lib/qnInterface'
import { useQuestionStore } from '@/stores/question'
import type { FormSetting } from '@/stores/question'

type fotmItemValue = string | Boolean | number
const form = computed(() => {
  return props.currentQuestion.setting || ({} as FormSetting)
})
// const { questionSetting, initQuestionSetting, setQuestionSetting } = useQuestionStore()
const emits = defineEmits(['change'])
const props = defineProps<{
  currentQuestion: any
}>()

const type = computed<string>(() => {
  const key: keyof QnType = props.currentQuestion.type
  return QnTypeMap[key]
})

const onChange = (key: string, v: fotmItemValue) => {
  console.log('change')
  emits('change', { k: key, v })
}
</script>

<style lang="scss" scoped>
.question-setting-panel {
  width: 260px;
  box-sizing: border-box;
  // position: absolute;
  // top: 0;
  // right: 0;
  background-color: #fff;
  border-left: 1px solid #ccc;
  padding: 10px;
  height: 100%;
  // transform: translateX(100%);
  &.active {
    // transform: translateX(0);
    // transition: transform 0.3s;
  }
  .title {
    font-size: 12px;
    color: #aaa;
  }
  .type {
    color: #484848;
    font-size: 16px;
    font-weight: 600;
    margin-top: 8px;
  }
  :deep(.el-form) {
    margin-top: 16px;
    .el-divider--horizontal {
      margin: 14px 0;
    }
    .group-label {
      font-size: 16px;
      font-weight: 600;
    }
    .el-form-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-switch {
        margin-left: 10px;
      }
      .el-form-item__content {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .el-text {
          cursor: pointer;
        }
      }
    }
  }
}
</style>
